<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background-image: url(images/1.jpg);
			}
			
			#mask {
				background-color: rgba(255, 255, 255, 0.3);
				height: 200px;
				text-align: center;
			}
			
			#mask img {
				width: 200px;
				margin-top: 35px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="mask">
			<img src="images/1.jpg" alt="">
			<img src="images/2.jpg" alt="">
			<img src="images/3.jpg" alt="">
			<img src="images/4.jpg" alt="">
			<img src="images/5.jpg" alt="">
		</div>
		<script type="text/javascript">
			var mask = document.getElementById("mask");
			var imgs = mask.getElementsByTagName('img');
			console.log(imgs);
			for(i = 0; i < imgs.length; i++) {
				imgs[i].onclick = function(){
					document.body.style.background = 'url('+ this.src +')';
				}
			}
		</script>
	</body>

</html>